// 各种动效
// 旋转
@keyframes spinAround {
	from {
		transform: rotate(0deg)
	}

	to {
		transform: rotate(360deg);
	}
}

// 上下跳动
@keyframes jump {
	from {
		transform: translateY(-2px)
	}

	to {
		transform: translateY(2px);
	}
}

// 旋转
@keyframes rotate {
	from {
		transform: rotate(-4deg)
	}

	to {
		transform: rotate(4deg);
	}
}

/* 按钮特效 */

.btnFrames{
	/* 加圆角 */
	&-radius {
		outline: none;
		transition: border-radius 0.4s;
	
		&:hover {
			border-bottom-right-radius: 40px!important;
			border-top-left-radius: 40px!important;
			border-bottom-left-radius: 10px!important;
			border-top-right-radius: 10px!important;
		}
	}
	&-jianbian{
		outline: none;
	
		&:hover {
			background: linear-gradient(180deg, #0857FF 0%, #200add 97%, #0c3de1 100%)!important;
		}
	}
}


.circle::before,
	.circle::after {
		box-sizing: inherit;
		position: absolute;
		content: '';
		border: 2px solid transparent;
		width: 0;
		height: 0;
	}
	
	.circle::after {
		bottom: 0;
		right: 0;
	}
	
	.circle::before {
		top: 0;
		left: 0;
	}
	
	.circle:hover::before,
	.circle:hover::after {
		width: 100%;
		height: 100%;
	}
	
	.circle:hover::after {
		border-bottom-color: #4361ee;
		border-left-color: #4361ee;
		transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 1s;
	
	}
	
	.circle:hover::before {
		border-top-color: #4361ee;
		border-right-color: #4361ee;
		transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
	
	}	


